<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d" class="cc">我是一个div</div>
    <script src="./js/jquery.min.js"></script>
    <script>
        /* jquery是一个强大的库
            对JS的代码进行一层封装
            jq => 
                链式调用
                选择器
        */
        // let div = document.querySelector("div")
        // console.log(div);


        /* JQ */
        // let div = $("div")
        // let div = $("#d")
        // let div = $(".cc")
        // console.log(div[0]);





        /* 
            JQ 常用的选择器
                1. 基本选择器
                    $("#div")   => id为div
                    $(".div")   => class为div
                    $("div")    => 标签为div
                    $("*")      => 所有的
                2. 层级选择器
                    $("div span")       => 获取div后面的所有后代
                    $("div>span")       => 获取div里面的自带
                    $("div+span")       => 获取div紧跟着的弟弟span
                    $("div~span")       => 获取div后面所有的弟弟span
                3. 过滤选择器
                    $("li:first")       => 获取所有li当中第一个
                    $("li:last")        => 获取所有li当中最后一个
                    $("li:eq(n)")       => 获取li当中下标为n的那个元素 下标从0开始
                    $("li:not(n)")      => 获取li当中下标不为n的那个元素 下标从0开始
                    $("li:even")        => 获取所有li当中下标为偶数的 下标从0开始
                    $("li:odd")         => 获取所有li当中下标为奇数的 下标从0开始
                    $("li:lt(n)")       => 获取所有li当中下标小于n的 下标从0开始
                    $("li:gt(n)")       => 获取所有li当中下标大于n的 下标从0开始
                4. 可见选择器
                    $("li:visible")     => 获取所有可见的元素
                    $("li:hidden")      => 获取所有隐藏的元素
                    可见方法
                        $("li:visibel").hide();
                        $("li:hidden").show();
                        $("li").toggle() //切换 ,如果是隐藏就显示,如果显示就隐藏
                5. 属性选择器
                    $("div[id]")			匹配属性有id
                    $("div[id=i1]")			匹配所有div中属性为id,id值为i1
                    $("div[id!=i1]")		匹配所有div中属性为id,id值不为i1
                    $("div[id^=i]") 		匹配所有div中属性为id,id值以i开头
                    $("div[id$=i]")  		匹配所有div中属性为id,id值以i结尾
                    $("div[id*=i]")			匹配所有div中属性为id,id值包含i
        */
    </script>
</body>
</html>